<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>测试过滤器单个参数</h3>
        <p>{{content |contentFilter}}</p>
        <input type="text" :value="content |contentFilter">
        <h3>测试过滤器多个参数</h3>
        <p>{{javaScore | add(vueScore,pythonScore)}}</p>
        <input type="text" :value="javaScore | add(vueScore,pythonScore)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter('contentFilter', function (value) {
            if (!value) {
                return ''
            }
            return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '**')
        })
        var vm = new Vue({
            el: '#app',
            data: {
                content: '小伙子,tmd就是SB',
                javaScore: 80,
                vueScore: 90,
                pythonScore: 100
            },
            filters: {
                add(num1, num2, num3) {
                    return num1 + num2 + num3
                }
            }
        })
    </script>
</body>

</html>